<template>
  <div class="box1">
    <!-- <div :class="[scrollType == '1' ? 'search_box' : 'search_box1']">
      <div class="search_con">
        <Search></Search>
      </div>
    </div> -->
    <!-- 职业选择 -->
    <div class="profession">
      <div class="profession_body">
        <professionMenu></professionMenu>
      </div>
      <div class=""></div>
    </div>
    <div class="carousel">
      <div class="carousel_area">
        <Carousel></Carousel>
      </div>
      <!-- 个人信息 -->
      <div class="Message_area">
        <Message></Message>
      </div>
    </div>
    <div class="hot_occupation">
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
      六星热门职业
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
    </div>
    <!-- 职业推荐 -->
    <div class="nav_box">
      <div class="nav_body"><occupationMenu></occupationMenu></div>
    </div>
    <div class="details_con">
      <posLay></posLay>
    </div>
    <div class="more_btn">更多热门职业</div>
    <div class="hot_occupation">
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
      六星热门企业
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
    </div>
    <div class="details_con">
      <Firm></Firm>
    </div>
    <div class="more_btn">更多热门企业</div>
    <div class="hot_occupation">
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
      六星推荐职位
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
    </div>
    <div class="details_con">
      <posLay></posLay>
    </div>
    <div class="more_btn">更多推荐职位</div>
  </div>
</template>

<script>
import Search from "../../components/search.vue";
import Carousel from "../../components/Carousel.vue";
import Message from "../home/components/homes/Message.vue";
import posLay from "../home/components/homes/posLay.vue";
import Firm from "../home/components/homes/Firm.vue";
import occupationMenu from "../home/components/homes/occupationMenu.vue";
import professionMenu from "../home/components/homes/professionMenu.vue";
export default {
  components: {
    // Search,
    Carousel,
    Message,
    posLay,
    Firm,
    occupationMenu,
    professionMenu,
  },
  data() {
    return {
      scroll: "",
      scrollType: "1",
    };
  },
  created() {
    this.$emit("passFunction", 1);
  },
  mounted() {},
  destroyed() {
    // 用于隐藏搜索框
    this.$emit("passFunction", 2);
  },
  methods: {},
};
</script>

<style scoped lang="less">
// 行业导航栏
.profession {
  width: 100%;
  min-height: 60px;
  border-radius: 10px;
  // margin-top: 30px;
  background-color: #4095e5;
  display: flex;
  .profession_body {
    width: 100%;
    height: 30px;
    margin: auto;
  }
}
// 职业导航栏
.nav_box {
  width: 100%;
  min-height: 60px;
  border-radius: 10px;
  margin-top: 30px;
  background-color: #bebebe;
  display: flex;
  .nav_body {
    width: 100%;
    height: 30px;
    margin: auto;
  }
}
// 轮播区
.carousel {
  width: 100%;
  min-height: 350px;
  margin-top: 50px;
  display: flex;
  .carousel_area {
    width: 71%;
    min-height: 350px !important;
    box-shadow: 0px 0px 2px 2px #b8b8b8;
  }
  // 个人信息
  .Message_area {
    width: 28%;
    min-height: 350px;
    margin-left: 1%;
    background-color: #fafafa;
    box-shadow: 0px 0px 3px 3px #b8b8b8;
    border-radius: 10px;
  }
}
// 热门职业
.hot_occupation {
  text-align: center;
  margin-top: 60px;
  // font-size: 24px;
  font-weight: 600;
  .el-icon-star-on {
    color: #bd3124;
  }
}
// 热门职业展示区
.details_con {
  width: 100%;
  margin-top: 20px;
}
// 点击加载更多职业
.more_btn {
  width: 35%;
  height: 38px;
  margin: 0 auto;
  margin-top: 40px;
  background-color: #3894ff;
  border-radius: 5px;
  color: #ffffff;
  text-align: center;
  line-height: 38px;
  font-size: 14px;
  margin-bottom: 10px;
}
</style>
